<template>
	<view class="tt-search">
		<view :class="['tt-search-box',code==200?'left':'']">
			<input @focus="addNavigato" @input="addSearch" type="text" placeholder="请输入关键字或公司名称" class="inp">
			<view class="btn btn-search" @click="addEvent">搜索</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tt-search-comp",
		data() {
			return {
				delay: null,
				v: ""
			};
		},
		props:{
			code: {
				type:[String,Number],
				default: "404"
			},
			
		},
		onLoad() {
			
		},
		methods: {
			addNavigato(){
				if(this.code == "404") {
					uni.navigateTo({
						// url:"../../pages/search/search?code=200"
					})
				}
			},
			addSearch(event){
				if(this.delay!=null) clearTimeout(this.delay);
				this.delay = setTimeout(()=>{
					// 记录输入框的值
					this.v = event.detail.value;
				},300)
				// console.log(event.detail.value);
			},
			addEvent(){
				// let keyword = this.v;
				this.$emit('click-item',this.v);
			}
		}
	}
</script>

<style lang="scss">
@import "../../uni.scss";
.tt-search {
	width: 100%;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
	user-select: none;
	.tt-search-box {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.btn {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			width: 90rpx;
			height: 58rpx;
			text-align: center;
			line-height: 58rpx;
			text-align: center;
			z-index: 10000;
			display: none;
		}
		.btn-search {
			font-size: 28rpx;
			background-color: $on-color;
			color: #fff;
		}
		.inp {
			border: 3rpx solid $on-color;
			width: 100%;
			height: 80rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}
	.left {
		.inp {
			text-align: left;
		}
		.btn-search {
			display: block;
		}
	}
}
</style>